Ext.onReady(function(){
	Ext.QuickTips.init();
	
	var urlForm = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
	frame:true,
        title: 'GUI Testing-Step1',
        bodyStyle:'padding:5px 5px 0',
        width: 450,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'URL',
		id:'urlTest_Id',
                name: 'urlTest',
                allowBlank:false
            }], 

	buttons: [{
 		text:'Fetch',
		handler:function(){
					var componentRecord = Ext.data.Record.create([{
			        name: 'componentName',
			        type: 'string'
			    	}, {
			        name: 'componentType',
			        type: 'string'
			    	}]);

					var jsonStore = new Ext.data.Store({
				  	proxy: new Ext.data.HttpProxy({
						url:"FetchUIElements?urlTest=" + document.getElementById('urlTest_Id').value,
						method:'GET'
						}),
				        reader: new Ext.data.JsonReader({totalProperty:"size",root:"data",id:"id"},componentRecord),       
				        sortInfo: {field: 'componentName', direction: 'ASC'},
					autoLoad:true
					    });
					var p = eval("(" + jsonStore + ")");
					alert('+p.size+');


						var editor = new Ext.ux.grid.RowEditor({
							saveText: 'Update'
						    });
						editor.on(
							'canceledit'
							,function(roweditor,forced){
								if(forced){ 
									var record = jsonStore.getAt(0);
									if(record.get('componentName')==='Component Name'){
									jsonStore.remove(record);
									gridElements.getView().refresh();	}
									}
						},this);

						var comboStore = new Ext.data.ArrayStore({
							fields:['componentType'],
							data: [
								['TextField'],
								['Radio'],
								['CheckBox'],
								['SelectList'],
								['Hidden']
							]
							});

						var gridElements = new Ext.grid.GridPanel({
					  		store: jsonStore,
							frame: true,
							columns: [
								{header:"Component Name", width:210, sortable:true,dataIndex:'componentName',editor: {xtype: 'textfield',allowBlank: false}},
								{header:"Component Type", width:210, sortable:true,dataIndex:'componentType',editor: {xtype: 'combo',allowBlank: false, store:comboStore, displayField:'componentType', valueField:'componentType', typeAhead: true, mode:'local',triggerAction:'all', selectOnFocus:true}}
								],
							stripeRows: true,
							height:400,
							width: 450,
							plugins: [editor],
							tbar: [{
							    iconCls: 'icon-user-add',
							    text: 'Add Component',
							    handler: function(){
							        var e = new componentRecord({
							            componentName: 'Component Name',
							            componentType: 'Component Type'
							          
							        });
							        editor.stopEditing();
							        jsonStore.insert(0, e);
							        var Count = jsonStore.getTotalCount();
							        alert(Count);
							        gridElements.getView().refresh();
							        gridElements.getSelectionModel().selectRow(0);
							        editor.startEditing(0);
							    }
							},{
							    ref: '../removeBtn',
							    iconCls: 'icon-user-delete',
							    text: 'Remove Component',
							    disabled: true,
							    handler: function(){
							        editor.stopEditing();
							        var s = gridElements.getSelectionModel().getSelections();
							        for(var i = 0, r; r = s[i]; i++){
							            jsonStore.remove(r);
							        }
							    }
							}],
							buttons: [{
					 			text:'Next>>'
					         		}]
					    	});
					   

						gridElements.render(document.body);
						gridElements.getSelectionModel().on('selectionchange', function(sm){
					        	gridElements.removeBtn.setDisabled(sm.getCount() < 1);
						    });
											
											}
					 		}]
						});      
	urlForm.render(document.body);

	



 });
